<template>
  <el-time-picker is-range v-model="selected" :value-format="valueFormat" range-separator="至"
    :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder" placeholder="选择时间范围"
    @change="onChange"></el-time-picker>
</template>

<script>
  export default {
    name: 'CheckboxGroup',
    props: {
      value: {
        type: String,
        default: null
      },
      valueFormat: {
        type: String,
        default: 'HH:mm:ss'
      },
      startPlaceholder: {
        type: String,
        default: '开始'
      },
      endPlaceholder: {
        type: String,
        default: '结束'
      }
    },
    data() {
      return {
        selected: null
      };
    },
    watch: {
      value: {
        handler(val) {
          if (this.value) {
            this.selected = this.value.split(',')
          } else {
            this.selected = null
          }
        },
        immediate: true
      }
    },

    methods: {
      onChange(e) {
        this.$emit('input', e.join(','));
      }
    }
  };
</script>
